
<style lang="less">
	page {
		background: #f7f7f7;
	}
	.container{
		padding-bottom: 60upx;
	}
	.main{
		padding: 0 30upx;
		box-sizing: border-box;
	}
	.package_list{
		margin-top: 20upx;
		.package_title{
			width: 140upx;
			height: 70upx;
			background: #FFFFFF;
			border-radius: 12upx 12upx 0upx 0upx;
			text-align: center;
			font-size: 30upx;
			font-weight: bold;
			color: #333333;
			line-height: 70upx;
		}
		.package_content{
			background: #FFFFFF;
			padding: 30upx;
			box-sizing: border-box;
			.package_content_top{
				margin-bottom: 20upx;
				padding-bottom: 20upx;
				border-bottom:  1upx solid #EDEDED;
				.package_content_title{
					margin-bottom: 16upx;
					display: flex;
					justify-content: space-between;
					.package_content_title_fl{
						font-size: 28upx;
						font-weight: 800;
						color: #333333;
						line-height: 28upx;
					}
					.package_content_title_fr{
						font-size: 26upx;
						font-weight: 500;
						color: #DBC191;
						line-height: 26upx;
					}
				}
				.ordernum{
					font-size: 24upx;
					font-weight: 500;
					color: #333333;
					line-height: 39upx;
					.ordernum_image{
						margin-left: 16upx;
						width: 28upx;
						height: 28upx;
					}
				}
			}
			.single{
				display: flex;
				justify-content: space-between;
				.single_txt{
					flex: 1;
					font-size: 24upx;
					font-weight: 500;
					color: #333333;
					line-height: 39upx;
					overflow:hidden;
					text-overflow:ellipsis;
					display:-webkit-box;
					-webkit-box-orient:vertical;
					-webkit-line-clamp:1;
					word-break: break-all;
				}
				.single_num{
					margin-left: 20upx;
					font-size: 24upx;
					font-weight: 500;
					color: #999999;
					line-height: 39upx;
				}
			}
			.logistics_message{
				margin-top: 20upx;
				box-sizing: border-box;
				padding: 20upx 30upx;
				width: 100%;
				background: #F7F7F7;
				border-radius: 12upx;
				
				.message_content_txt{
					font-size: 22upx;
					font-weight: 500;
					color: #999999;
					line-height: 30upx;
				}
				.message_content_time{
					margin-top: 16upx;
					font-size: 20upx;
					font-weight: 500;
					color: #999999;
					line-height: 24upx;
				}
			}
		}
	}
	.zhao{
		position: fixed;
		left: 0;
		top: 0;
		bottom: 0;
		right: 0;
		z-index: 9;
		background: #000000;
		opacity: 0.4;
	}
	
	.popup{
		position: fixed;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
		z-index: 10;
		.popup_close{
			margin-top: 30upx;
			text-align: center;
			.popup_close_image{
				width: 60upx;
			}
		}
	}
	.popup_main{
		width: 630upx;
		// height: 900upx;
		background: #FFFFFF;
		border-radius: 24upx;
		padding: 40upx 30upx;
		box-sizing: border-box;
		.popup_title{
			text-align: center;
			font-size: 30upx;
			font-weight: 800;
			color: #333333;
			line-height: 48upx;
		}
		.package_content_top{
			margin: 20upx 0;
			padding-bottom: 20upx;
			border-bottom: 1upx solid #DDDDDD;
			.logistics_company{
				display: flex;
				justify-content: space-between;
				align-items: center;
				.logistics_company_fl{
					font-size: 26upx;
					font-weight: 800;
					color: #333333;
					line-height: 48upx;
				}
				.logistics_company_fr{
					font-size: 24upx;
					font-weight: 500;
					color: #DBC291;
					line-height: 48upx;
				}
			}
			.logisticsnum{
				font-size: 22upx;
				font-weight: bold;
				color: #333333;
				line-height: 39upx;
				.logisticsnum_image{
					margin-left: 16upx;
					width: 28upx;
					height: 28upx;
				}
			}
		}
		.popup_single_content{
			padding-bottom: 20upx;
			// border-bottom: 1upx solid #DDDDDD;
			max-height: 190upx;
			.popup_single{
				display: flex;
				justify-content: space-between;
				align-items: center;
				.popup_single_txt{
					font-size: 20upx;
					font-weight: 500;
					color: #333333;
					line-height: 30upx;
					overflow:hidden;
					text-overflow:ellipsis;
					display:-webkit-box;
					-webkit-box-orient:vertical;
					-webkit-line-clamp:1;
					word-break: break-all;
				}
				.popup_single_num{
					margin-left: 20upx;
					font-size: 20upx;
					font-weight: 500;
					color: #999999;
					line-height: 30upx;
				}
			}
		}
		
		.popup_logistics_scroll{
			margin-top: 20upx;
			background: #F7F7F7;
			min-height: 300upx;
			max-height: 430upx;
			border-radius: 10px;
			.logistics_message{
				padding: 26upx 30upx 0 26upx;
				box-sizing: border-box;
				.message_list{
					position: relative;
					// border-left: 2upx solid #DDDDDD;
					&:last-of-type .line{
						display: none;
					}
					&:first-of-type .circle{
						background: #DBC291;
					}
					&:first-of-type .message_content{
						color: #DBC291;
					}
					.circle{
						position: absolute;
						left: 0;
						top: 0;
						z-index: 2;
						transform: translateX(-45%);
						width: 16upx;
						height: 16upx;
						background: #DDDDDD;
						border-radius: 50%;
					}
					.line{
						position: absolute;
						left: 0;
						top: 0;
						z-index: 1;
						width: 2upx;
						height: 100%;
						background: #DDDDDD;
					}
					.message_content{
						padding: 0 0 30upx  36upx;
						color: #999999;
						.message_content_txt{
							margin-bottom: 16upx;
							font-size: 20upx;
							font-weight: 500;
							line-height: 32upx;
							// overflow:hidden;
							// text-overflow:ellipsis;
							// display:-webkit-box;
							// -webkit-box-orient:vertical;
							// -webkit-line-clamp:2;
							// word-break: break-all;
						}
						.message_content_time{
							font-size: 18upx;
							font-weight: bold;
							line-height: 18upx;
						}
					}
				}
			}
		}
	}
</style>


<template>

	<view class="container">
		<view class="main" v-if="isShow == true">
			<view class="package_list" v-for="(item,index) in logisticsList" :key="index">
				<view class="package_title">{{item.name}}</view>
				<view class="package_content">
					<view class="package_content_top">
						<view class="package_content_title">
							<view class="package_content_title_fl">{{item.freightName}}</view>
							<view class="package_content_title_fr">{{item.shipmentType}}</view>
						</view>
						<view class="ordernum">订单编号: {{item.orderNo}}</view>
						<view class="ordernum">
							物流单号: {{item.freightCode}}
							<image src="../../static/img/copy_icon@2x.png" class="ordernum_image" mode="widthFix" @tap="copy(item.freightCode)"/>
						</view>
					</view>
					<view class="single" v-for="(v,i) in item.list" :key="i">
						<view class="single_txt">{{v.goodsName}}</view>
						<view class="single_num">× {{v.num}}</view>
					</view>
					<view class="logistics_message" @tap="openPopup(item.name,item.orderNo,item.shipmentId)" v-if="item.traces != null && item.traces != '' && item.traces != undefined">
						<block v-for="(v,i) in item.traces" :key="i">
							<view class="message_content_txt">{{v.acceptStation}}</view>
							<view class="message_content_time">{{v.acceptTime}}</view>
						</block>
					</view>
				</view>
			</view>
		</view>
		<view class="zhao"  v-if="hidden" @tap="close"></view>
		<view class="popup" v-if="hidden">
			<view class="popup_main">
				<view class="popup_title">{{pupopObj.name}}物流信息</view>
				<view class="package_content_top">
					<view class="logistics_company">
						<view class="logistics_company_fl">{{pupopObj.freightName}}</view>
						<view class="logistics_company_fr">{{pupopObj.shipmentType}}</view>
					</view>
					<view class="logisticsnum">
						订单编号: {{pupopObj.orderNo}}
						<image src="../../static/img/copy_icon@2x.png" class="logisticsnum_image" mode="widthFix" @tap="copy(pupopObj.orderNo)"/>
					</view>
					<view class="logisticsnum">
						物流单号: {{pupopObj.freightCode}}
						<image src="../../static/img/copy_icon@2x.png" class="logisticsnum_image" mode="widthFix" @tap="copy(pupopObj.freightCode)"/>
					</view>
				</view>
				<scroll-view scroll-y="true" class="popup_single_content">
					<view class="popup_single" v-for="(v,i) in pupopObj.list" :key="i">
						<view class="popup_single_txt">{{v.goodsName}}</view>
						<view class="popup_single_num">× {{v.num}}</view>
					</view>
				</scroll-view>
				
				<scroll-view scroll-y="true" class="popup_logistics_scroll">
					<view class="logistics_message">
						<view class="message_list" v-for="(v,i) in pupopObj.traces" :key="i">
							<view class="circle"></view>
							<view class="line"></view>
							<view class="message_content">
								<view class="message_content_txt">{{v.acceptStation}}</view>
								<view class="message_content_time">{{v.acceptTime}}</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			
			<view class="popup_close" @tap="close">
				<image src="../../static/img/closed_boxs@2x.png" class="popup_close_image" mode="widthFix" />
			</view>
		</view>
	</view>

</template>

<script>
	import api from '@/common/api'
	import h5Copy from '@/common/junyi-h5-copy.js'
  export default {

    components: {
		
	},

    data () {

      return {
		  pupopObj:{},  //物流弹窗
		  logisticsList:[],  //物流信息
		  headerArr:[],   //头部信息
		  token:'',
		  orderId:'',  //订单id
		  hidden:false,
		  isShow:false,
		  http:api.httpImg,//图片前缀
	  }
    },
	onLoad(options){
		console.log(options)
		this.token=uni.getStorageSync('token')
		if(Boolean(options) != false){
			this.orderId = options.orderId
			this.messsageList()
		}
	},
    methods: {
		openPopup(name,orderNo,shipmentId){
			this.hidden = true
			this.messsageInfo(name,orderNo,shipmentId)
		},
		close(){
			this.hidden = false
		},
		
		//复制
		copy(orderNo) {
			console.log(orderNo)
			let result = h5Copy(orderNo)
			if (result === true) {
				uni.showToast({
					title: '复制成功！',
					icon: 'none'
				})
			}
		},
		//物流头部接口
		async messsageList(){
		  const [err, res] = await api.messsageList({
			  query: {
				  orderId: this.orderId
			  },
			   header:{
					'token':this.token
			   },
		  })
		  if(res.data.code == 0){
			  this.headerArr = res.data.data
			  this.headerArr.forEach((v,i) => {
				  this.messsageLastInfo(v.name,v.orderNo,v.shipmentId,i)
			  })
		  }
		},
		// 获取最新的物流轨迹
		async messsageLastInfo(name,orderNo,shipmentId,i){
		  const [err, res] = await api.messsageLastInfo({
			  query: {
				  orderNo: orderNo,
				  shipmentId: shipmentId
			  },
			   header:{
					'token':this.token
			   },
		  })
		  if(res.data.code == 0){
			  let obj = res.data.data
			  obj.name = name
			  obj.orderNo = orderNo
			  obj.shipmentId = shipmentId
			  obj.i = i
			  this.logisticsList = [...this.logisticsList,obj]
			  
			   if(this.logisticsList.length == this.headerArr.length){
				  this.logisticsList.sort(function(a,b){
					return a.i - b.i
				  })
				  this.isShow = true
				}
			  // if(this.logisticsList.length == this.headerArr.length){
				 //  let attr=[]
				 //  for(let i=0; i<this.headerArr.length; i++){
					//   for(let j=0; j<this.logisticsList.length; j++){
					// 	  if(this.headerArr[i].i==this.logisticsList[j].shipmentId){
					// 		  attr.push(this.logisticsList[j])
					// 	  }
					//   }
				 //  }
				 //  this.logisticsList=attr
				 //  this.isShow=true
			  // }
			console.log(this.logisticsList)
		  }
		  
		},
		// 物流详情
		async messsageInfo(name,orderNo,shipmentId){
		  const [err, res] = await api.messsageInfo({
			  query: {
				  orderNo: orderNo,
				  shipmentId: shipmentId
			  },
			   header:{
					'token':this.token
			   },
		  })
		  if(res.data.code == 0){
			  this.pupopObj = res.data.data
			  this.pupopObj.name = name
		  }
		}
	},

  }
</script>